<template>
    <div class="default-layout-wrapper">
        <a-layout class="layout-container-box">
            <a-layout-header class="layout-header-box">
                <Header>
                    <template slot="centerContent">
                        <Menus />
                    </template>
                </Header>
            </a-layout-header>
            <a-layout-content class="layout-content-box">
                <!-- <router-view></router-view> -->
                <keep-alive>
                    <router-view v-if="$route.meta.isKeepAlive"></router-view>
                </keep-alive>
                <router-view v-if="!$route.meta.isKeepAlive"></router-view>
            </a-layout-content>
            <!-- <a-layout-footer>Footer</a-layout-footer> -->
        </a-layout>
    </div>
</template>

<script>
import Menus from "../components/menus";
import Header from "../components/header";
export default {
    name: "defaultLayout",
    components: {
        Menus,
        Header,
    },
    mounted() {},
    data() {
        return {};
    },
    methods: {},
};
</script>

<style lang="less" scoped>
.default-layout-wrapper {
    height: 100%;
    .layout-container-box {
        height: 100%;
    }
    .layout-header-box {
        padding: 0 20px;
        // background-color: #082254;
        background-color: var(--main-body-bg-color);
        .ant-menu-horizontal {
            border-bottom: none;
        }
    }
    .layout-content-box {
        height: 100%;
        padding: 10px;
        border: 1px solid #eee;
        background-color: #fff;
    }
}
</style>
<style lang="less">
.ant-menu-submenu-popup {
    .ant-menu-submenu > .ant-menu {
        border: 1px solid #f1e8e8;
    }
    .ant-menu-vertical.ant-menu-sub.ant-menu-submenu-content {
        .ant-menu-item {
            &:hover {
                color: #fff;
                // background-color: #0aa679;
                background-color: var(--side-menu-bg-color);
            }
        }
        .ant-menu-item.ant-menu-item-selected {
            color: #fff;
            //   background-color: #0aa679;
            background-color: var(--side-menu-bg-color);
        }
    }
}
</style>
